//初始化区域滚动组件
mui('.mui-scroll-wrapper').scroll({
    indicators:false
})

$(function(){
	//获取到历史记录 localStorage.getItem(key)
	///* 约定本地存储历史记录的key为  letaoHistory */
	// 本地存储历史记录格式 ['张三', 'lisi']
	//   ===> localStorage.setItem("letaoHistory", JSON.stringify(['耐克', '阿迪']))
	// 1.1
	var historyList = getLocalData('letaoHistory')
	console.log(historyList);
	// 1.2 在页面中渲染出来
	$('.lt_history').html(template('history',{list:historyList}))

	// 2. 点击搜索
	// 2.1 给搜索按钮注册点击事件
	$('.search_btn').on('tap',function(){
		//2.2 获取用户输入的文本框中的内容
		//为了防止用户输入时候有空白符，用replace替换成空字符串
		var val = $('.search_input').val().replace(/^\s*$/g, '')
		if( !val){
			mui.toast('搜索不能为空')
			return
		}
		//2.3 先获取本地储存的搜索记录在往里面追加当前的搜索记录
		//2.3.1 获取本地储存的搜索记录
		var arr = getLocalData('letaoHistory')//调用获取记录方法，返回一个数组
		//1.需求：最多显示出10条搜索记录，从搜索时间最新开始从上往下，有相同记录
		//添加最新 删除相同的一条
		var flag = false
		var flagIndex = -1
		arr.forEach(function(item,index){
			//item 当前数组中正在遍历的那一项 index当前正在遍历的那一项的索引
			if(item == val) {
				flag = true
				flagIndex = index
			}
		})
		//每一次搜素将会追加到数组的最后一项，因为渲染是从最后往前渲染在页面上
		if(flag){// 表示本地存储中有当前搜索框中的搜索的值
			arr.splice(flagIndex,1)//先删除
			arr.push(val) //再追加
		} else {
			if(arr.length < 10){
				arr.push(val)
			} else {
				arr.splice(0,1)
				arr.push(val)
			}
		}
		//2.3.4 本地储存
		localStorage.setItem('letaoHistory',JSON.stringify(arr));
		// 2.3.5 跳转到搜索列表页
    	location.href = 'searchList.html?key=' + val
	})

	//3. 删除记录 --- 删除本地里 letaoHistory 这个组织里面的某一项
	//3.1 事件委托 给删除事件绑定事件
	$('.lt_history').on('tap','.mui-icon',function(){
		//3.2 获取当前点击按钮时的 data-index属性 
		var index = $(this)[0].getAttribute('data-index');
		//3.2.1 获取本地数据
		var arr = getLocalData('letaoHistory');
		//3.3
		arr.splice(index,1)
		//3.4 本地重新储存
		localStorage.setItem('letaoHistory',JSON.stringify(arr));
		//3.5 重新渲染在页面
		$('.lt_history').html(template('history',{list:arr}))
	
	})
	//4. 清空记录
	//4.1 用事件委托给清空按钮注册事件
	$('.lt_history').on('tap','.fa',function(){
		//4.2清空本地储存
		localStorage.setItem('letaoHistory','');
		//4.3 重新渲染
		$('.lt_history').html(template('history',{list:[]}))
	})

})

var getLocalData = function(key){
	//约定一个键 letaoHistory 存的是json格式的字符串
	var str = localStorage.getItem(key) || '[]';
	var arr = JSON.parse(str)
	return arr

}